import React, {useState, useCallback} from 'react';
import {
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  StatusBar,
  ScrollView,
  Pressable,
  Alert,
  Button,
  TouchableOpacity,
  Image,
  TextInput,
  Easing,
} from 'react-native';
import {Tester, TestSuite, TestCase} from '@rnoh/testerino';
import {
  NavigationContainer,
  ParamListBase,
  NavigationHelpers,
} from '@react-navigation/native';
import {
  createStackNavigator,
  CardStyleInterpolators,
  HeaderStyleInterpolators,
  TransitionPresets,
} from '@react-navigation/stack';
import {
  createBottomTabNavigator,
  useBottomTabBarHeight,
  TransitionSpecs,
  SceneStyleInterpolators,
} from '@react-navigation/bottom-tabs';
import type {
  BottomTabBarButtonProps,
  BottomTabBarProps,
  BottomTabHeaderProps,
  BottomTabNavigationProp,
  BottomTabScreenProps,
} from '@react-navigation/bottom-tabs';
import MyImage from './Images';

type Props = BottomTabScreenProps<ParamListBase>;
const checkType = (obj: any) => {
  return Object.prototype.toString.call(obj).slice(8, -1);
};

const checkIsObject = (obj: any) => {
  return checkType(obj) === 'Object';
};

const ScreenListenerDataContext = React.createContext(null);

export const BottomTabsExamples = () => {
  const ToggleButton: React.FC<{
    title?: string;
    list: any[];
    initValue: any;
    onChange: Function;
  }> = ({title, list, initValue, onChange}) => {
    let title1 = initValue,
      value1 = initValue;
    if (checkIsObject(initValue)) {
      title1 = initValue.title;
      value1 = initValue.value;
    }
    let [state, setState] = useState(title1);
    return (
      <View
        style={{
          flexWrap: 'wrap',
          flexDirection: 'row',
          marginVertical: 5,
        }}>
        <Text style={{color: '#fff'}}>{title}：</Text>
        <View
          style={{
            borderWidth: 1,
            borderColor: '#eee',
            borderRadius: 2,
            flexWrap: 'wrap',
            flexDirection: 'row',
          }}>
          {list.map((key: any, index: number) => {
            let title = key,
              value = key;
            if (Object.prototype.toString.call(key).slice(8, -1) === 'Object') {
              title = key.title;
              value = key.value;
            }
            return (
              <Pressable
                style={{
                  borderEndWidth: index + 1 === list.length ? 0 : 1,
                  borderColor: '#eee',
                  backgroundColor: state === title ? '#0081f1' : '#ffffff',
                  paddingHorizontal: 6,
                }}
                key={index + ''}
                onPress={() => {
                  setState(title);
                  onChange(key);
                }}>
                <Text>{title + ''}</Text>
              </Pressable>
            );
          })}
        </View>
      </View>
    );
  };

  function HomeScreenForScreenListeners({navigation}: Props) {
    const screenListenerData = React.useContext(ScreenListenerDataContext);
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Home!</Text>
        <TextInput style={styles.textInput} />
        <Text style={{marginTop: 20, fontSize: 16}}>
          Screen Listener Data: {screenListenerData || 'No data yet'}
        </Text>
      </View>
    );
  }

  function NotificationsScreenForScreenListeners({navigation, route}: Props) {
    const screenListenerData = React.useContext(ScreenListenerDataContext);
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Notifications!</Text>
        <Text style={{marginTop: 20, fontSize: 16}}>
          Screen Listener Data: {screenListenerData || 'No data yet'}
        </Text>
      </View>
    );
  }

  function SettingsScreenForScreenListeners({navigation}: Props) {
    const screenListenerData = React.useContext(ScreenListenerDataContext);
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Settings!</Text>
        <Text style={{marginTop: 20, fontSize: 16}}>
          Screen Listener Data: {screenListenerData || 'No data yet'}
        </Text>
      </View>
    );
  }
  function HomeScreen({navigation}: Props) {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Home!</Text>
        <TextInput style={styles.textInput} />
      </View>
    );
  }
  function ProfileScreen() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Profile!</Text>
      </View>
    );
  }

  function NotificationsScreen({navigation, route}: Props) {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>{isScreenLayout ? 'loading....' : 'Notifications!'}</Text>
      </View>
    );
  }

  function SettingsScreen({navigation}: Props) {
    const screenListenerData = React.useContext(ScreenListenerDataContext);
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Settings!</Text>
      </View>
    );
  }

  function HomeScreenNest({navigation}: Props) {
    const parentNavigation =
      navigation.getParent<NavigationHelpers<ParamListBase>>('uniId');
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Home!</Text>
        <Text>parentNavigation:{JSON.stringify(parentNavigation)}</Text>
        <Button
          title="go to parent settings"
          onPress={() => parentNavigation.navigate('Settings')}
        />
      </View>
    );
  }

  function HomeNest({navigation}: Props) {
    return (
      <Stack.Navigator>
        <Stack.Screen name="HomeScreenNest" component={HomeScreenNest} />
      </Stack.Navigator>
    );
  }

  function MyTabBar({state, descriptors, navigation}: BottomTabBarProps) {
    return (
      <View style={{flexDirection: 'row'}}>
        {state.routes.map((route, index) => {
          const {options} = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;

          const isFocused = state.index === index;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
              canPreventDefault: true,
            });
            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name, route.params);
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: 'tabLongPress',
              target: route.key,
            });
          };

          return (
            <TouchableOpacity
              key={index}
              accessibilityRole="button"
              accessibilityState={isFocused ? {selected: true} : {}}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              onLongPress={onLongPress}
              style={{flex: 1}}>
              <Text style={{color: isFocused ? '#673ab7' : '#222'}}>
                {label + ''}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }

  const Tab = createBottomTabNavigator();
  const Stack = createStackNavigator();
  const [screens, setScreens] = useState([] as string[]);

  function HomeScreen1() {
    React.useEffect(() => {
      !screens.includes('Home') && setScreens([...screens, 'Home']);
    }, []);
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Home!</Text>
      </View>
    );
  }

  function NotificationsScreen1() {
    React.useEffect(() => {
      !screens.includes('Notifications') &&
        setScreens([...screens, 'Notifications']);
    }, []);
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Notifications!</Text>
      </View>
    );
  }

  function SettingsScreen1() {
    React.useEffect(() => {
      !screens.includes('Settings') && setScreens([...screens, 'Settings']);
    }, []);
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Settings!</Text>
      </View>
    );
  }

  interface State {
    [propName: string]: {
      platform?: string;
      testName?: '';
      type?: 'custom' | 'preview';
      description?: string;
      props?: {
        screenOptions?: {};
        [propName: string]: any;
      };
      value?: any;
      valueList?: any[];
      options?: boolean;
      extraOptions?: object;
    };
  }
  const [isLayout, setLayout] = useState(false);
  const [isScreenLayout, setScreenLayout] = useState(false);

  const [state, setState] = useState<State>(() => {
    return {
      id: {
        type: 'custom',
      },

      initialRouteName: {
        type: 'preview',
        description: '默认路由,设置为Settings',
        props: {
          initialRouteName: 'Settings',
        },
      },

      backBehavior: {
        value: 'firstRoute',
        description: '控制返回时路由的切换顺序',
        valueList: ['firstRoute', 'initialRoute', 'order', 'history', 'none'],
        extraOptions: {
          initialRouteName: 'Notifications',
        },
      },

      // detachInactiveScreens: {
      //     platform: 'android,ios',
      //     tip: 'react-native-screens功能',
      //     description: '计算未激活的页面，以使用react-native-screens功能节省性能,这是react-native-screens功能',
      //     value: true,
      //     valueList: [
      //         false,
      //         true,
      //     ],
      // },

      sceneStyle: {
        type: 'preview',
        description: '屏幕容器样式,设置为红色背景',
        props: {
          screenOptions: {
            sceneStyle: {
              backgroundColor: 'red',
            },
          },
        },
      },

      tabBar: {
        type: 'preview',
        description: '自定义tabBar',
        props: {
          tabBar: (props: BottomTabBarProps) => <MyTabBar {...props} />,
        },
      },

      title: {
        type: 'custom',
      },

      tabBarLabel: {
        type: 'custom',
      },
      tabBarShowLabel: {
        options: true,
        value: true,
        description: '是否展示标签',
        valueList: [false, true],
      },

      tabBarLabelPosition: {
        options: true,
        value: 'below-icon',
        description: '标签位置',
        valueList: ['below-icon', 'beside-icon'],
      },
      tabBarLabelStyle: {
        description: 'tabBar标签样式，加个粉色背景',
        type: 'preview',
        props: {
          screenOptions: {
            tabBarLabelStyle: {
              backgroundColor: 'pink',
            },
          },
        },
      },
      tabBarIcon: {
        type: 'custom',
      },
      tabBarIconStyle: {
        description: 'tabBar图标样式,设置背景颜色',
        value: {
          title: 'red',
          value: {
            backgroundColor: 'red',
            width: 30,
            height: 30,
          },
        },
        options: true,
        valueList: [
          {
            title: 'red',
            value: {
              backgroundColor: 'red',
              width: 30,
              height: 30,
            },
          },
          {
            title: 'pink',
            value: {
              backgroundColor: 'pink',
              width: 30,
              height: 30,
            },
          },
          {
            title: 'black',
            value: {
              backgroundColor: 'black',
              width: 30,
              height: 30,
            },
          },
        ],
      },
      tabBarBadge: {
        type: 'custom',
      },
      tabBarBadgeStyle: {
        description: 'tabBar徽章样式,设置背景颜色',
        value: {
          title: 'red',
          value: {
            backgroundColor: 'red',
          },
        },
        options: true,
        valueList: [
          {
            title: 'red',
            value: {
              backgroundColor: 'red',
            },
          },
          {
            title: 'pink',
            value: {
              backgroundColor: 'pink',
            },
          },
          {
            title: 'blue',
            value: {
              backgroundColor: 'blue',
            },
          },
        ],
        extraOptions: {
          tabBarBadge: 'a',
        },
      },
      tabBarAccessibilityLabel: {
        type: 'custom',
      },
      tabBarButton: {
        description: 'tabBarButton自定义,有动画效果',
        type: 'preview',
        props: {
          screenOptions: {
            tabBarButton: (props: BottomTabBarButtonProps) => (
              <TouchableOpacity {...props} />
            ),
          },
        },
      },
      tabBarActiveTintColor: {
        description: '激活项颜色',
        options: true,
        value: undefined,
        valueList: [undefined, 'gray', 'red', 'blue'],
      },
      tabBarInactiveTintColor: {
        description: '未激活项颜色',
        options: true,
        value: undefined,
        valueList: [undefined, 'gray', 'red', 'blue'],
      },

      tabBarActiveBackgroundColor: {
        description: '激活项背景颜色',
        options: true,
        value: undefined,
        valueList: [undefined, 'gray', 'red', 'blue'],
      },

      tabBarInactiveBackgroundColor: {
        description: '未激活项背景颜色',
        options: true,
        value: undefined,
        valueList: [undefined, 'gray', 'red', 'blue'],
      },
      // tabBarHideOnKeyboard: {
      //   description: '打开键盘时隐藏tabBar',
      //   options: true,
      //   value: false,
      //   valueList: [false, true],
      // },
      tabBarItemStyle: {
        type: 'preview',
        description: 'tabBar项样式',
        props: {
          screenOptions: {
            tabBarItemStyle: {
              backgroundColor: 'blue',
            },
          },
        },
      },
      tabBarStyle: {
        type: 'preview',
        description: 'tabBar样式，加粉色背景',
        props: {
          screenOptions: {
            tabBarStyle: {
              backgroundColor: 'pink',
            },
          },
        },
      },
      tabBarBackground: {
        type: 'preview',
        description: 'tabBar背景元素,添加一个图片背景',
        props: {
          screenOptions: {
            tabBarBackground: () => {
              return (
                <View
                  style={{
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Image source={MyImage} style={{height: 20, width: 20}} />
                </View>
              );
            },
          },
        },
      },
      lazy: {
        description: '是否懒加载',
        type: 'custom',
        options: true,
        value: true,
        valueList: [false, true],
      },
      // freezeOnBlur: {
      //     platform: 'android,ios',
      //     tip: 'react-native-screens的功能',
      //     description: '是否阻止非活动页面重新渲染,这是react-native-screens库的功能',
      //     options: true,
      //     value: false,
      //     valueList: [false, true]
      // },
      header: {
        type: 'preview',
        description: '自定义头部',
        props: {
          screenOptions: {
            header: ({navigation, route, options}: BottomTabHeaderProps) => {
              return (
                <View
                  style={[
                    {
                      display: 'flex',
                      alignItems: 'center',
                      flexDirection: 'row',
                    },
                  ]}>
                  <Text>{route.name}</Text>
                </View>
              );
            },
          },
          headerShown: true,
        },
      },
      headerShown: {
        description: '是否显示header',
        options: true,
        value: true,
        valueList: [false, true],
      },
      tabPress: {
        type: 'custom',
      },
      tabLongPress: {
        type: 'custom',
      },
      layout: {
        type: 'custom',
        description: '设置layout',
        title: 'layout',
      },
      screenLayout: {
        type: 'custom',
        description: '设置screenLayout',
        title: 'screenLayout',
      },
      screenListeners: {
        type: 'custom',
        description: '设置screenListeners',
        title: 'screenListeners',
      },
      tabBarPosition: {
        description: 'Position of the tab bar',
        options: true,
        value: 'bottom',
        valueList: ['bottom', 'top', 'left', 'right'],
      },
      // tabBarVariant: {
      //   description: 'Variant of the tab bar',
      //   options: true,
      //   value: 'uikit',
      //   valueList: ['uikit', 'material'],
      //   extraOptions: {
      //     tabBarPosition: 'left',
      //   },
      // },
      popToTopOnBlur: {
        type: 'custom',
        description: '设置popToTopOnBlur',
        title: 'popToTopOnBlur',
      },
      useBottomTabBarHeight: {
        type: 'custom',
        description: '通过useBottomTabBarHeight获取高度',
        title: 'useBottomTabBarHeight',
      },
      animation: {
        description: '是否在更改标签时显示动画',
        options: true,
        value: 'none',
        valueList: ['fade', 'shift', 'none'],
      },
      transitionSpecTiming150: {
        type: 'custom',
        description: 'transitionSpec: timing设置150ms',
        title: 'transitionSpecTiming150',
      },
      transitionSpecTiming1500: {
        type: 'custom',
        description: 'transitionSpec: timing设置1500ms',
        title: 'transitionSpecTiming1500',
      },
      transitionSpecSpring: {
        type: 'custom',
        description: 'transitionSpec: Spring 弹性设置',
        title: 'transitionSpecSpring',
      },
      transitionSpecSpring2: {
        type: 'custom',
        description: 'transitionSpec: Spring 弹性设置更大',
        title: 'transitionSpecSpring2',
      },
      sceneStyleInterpolator: {
        type: 'custom',
        description: 'sceneStyleInterpolator配置',
        title: 'sceneStyleInterpolator',
      },
      sceneStyleInterpolatorScale: {
        type: 'custom',
        description: '带缩放效果的sceneStyleInterpolator',
        title: 'sceneStyleInterpolatorScale',
      },
      sceneStyleInterpolatorSlide: {
        type: 'custom',
        description: '带滑动效果的sceneStyleInterpolator',
        title: 'sceneStyleInterpolatorSlide',
      },
    };
  });

  //组件按钮
  const [currentIndex, setIndex] = useState(0);
  type ComButtonProps = {
    index: number;
    title: string;
  };
  const ComButton = ({index, title}: ComButtonProps) => {
    return (
      <Pressable
        onPress={() => {
          setIndex(index);
        }}>
        <View style={styles.comButton}>
          <Text style={styles.comButtonText}>打开{title}</Text>
        </View>
      </Pressable>
    );
  };
  const [screenListenerData, setScreenListenerData] = React.useState(
    null,
  ) as any;

  const [useOptions, setOptions] = useState({
    tabBarPosition: 'left',
    tabBarVariant: 'uikit',
    tabBarHideOnKeyboard: false,
  });
  const toggleTabBarPosition = useCallback(() => {
    setOptions(prev => ({
      ...prev,
      tabBarPosition: prev.tabBarPosition === 'left' ? 'right' : 'left',
    }));
  }, []);
  const toggleTabBarVariant = useCallback(() => {
    setOptions(prev => ({
      ...prev,
      tabBarVariant: prev.tabBarVariant === 'uikit' ? 'material' : 'uikit',
    }));
  }, []);
  const toggleTabBarHideOnKeyboard = useCallback(() => {
    setOptions(prev => ({
      ...prev,
      tabBarHideOnKeyboard: !prev.tabBarHideOnKeyboard,
    }));
  }, []);
  return (
    <SafeAreaView style={{flex: 1}}>
      <StatusBar></StatusBar>
      <Tester style={{flex: 1}}>
        <ScrollView>
          {Object.entries(state).map(([title, obj], index) => {
            let {
              platform,
              testName,
              type,
              props = {},
              value,
              description = '',
              valueList = [],
              options,
              extraOptions,
            } = obj;
            if (index !== currentIndex) {
              return <ComButton index={index} title={title} key={title} />;
            }
            let initOptions = {};

            if (!type) {
              if (options) {
                initOptions = {
                  screenOptions: {
                    ...extraOptions,

                    [title]: checkIsObject(state?.[title].value)
                      ? state?.[title].value.value
                      : state?.[title].value,
                  },
                };
              } else {
                initOptions = {
                  ...extraOptions,
                  ...{
                    [title]: checkIsObject(state?.[title].value)
                      ? state?.[title].value.value
                      : state?.[title].value,
                  },
                };
              }
              return (
                <TestSuite
                  name={(platform ? `[${platform}]` : '') + (testName || title)}
                  key={title + state?.[title].value}>
                  <ToggleButton
                    title={'切换' + title}
                    list={valueList}
                    initValue={value}
                    onChange={(val: any) => {
                      setState({
                        ...state,
                        [title]: {
                          ...state?.[title],
                          value: val,
                        },
                      });
                    }}></ToggleButton>
                  <TestCase itShould={description} tags={['C_API']}>
                    <View style={styles.container}>
                      <NavigationContainer>
                        <Tab.Navigator {...initOptions}>
                          <Tab.Screen name="Home" component={HomeScreen} />
                          <Tab.Screen
                            name="Notifications"
                            component={NotificationsScreen}
                          />
                          <Tab.Screen
                            name="Settings"
                            component={SettingsScreen}
                          />
                        </Tab.Navigator>
                      </NavigationContainer>
                    </View>
                  </TestCase>
                </TestSuite>
              );
            } else if (type === 'preview') {
              let {screenOptions = {}, ...rest} = props;
              initOptions = {
                screenOptions: {
                  ...screenOptions,
                },
                ...rest,
              };
              return (
                <TestSuite
                  name={
                    (platform ? `[${platform}] ` : '') + (testName || title)
                  }
                  key={title}>
                  <TestCase itShould={description} tags={['C_API']}>
                    <View style={styles.container}>
                      <NavigationContainer>
                        <Tab.Navigator {...initOptions}>
                          <Tab.Screen name="Home" component={HomeScreen} />
                          <Tab.Screen
                            name="Notifications"
                            component={NotificationsScreen}
                          />
                          <Tab.Screen
                            name="Settings"
                            component={SettingsScreen}
                          />
                        </Tab.Navigator>
                      </NavigationContainer>
                    </View>
                  </TestCase>
                </TestSuite>
              );
            } else {
              if (title === 'id') {
                return (
                  <TestSuite name="id" key={'id'}>
                    <TestCase
                      itShould="navigator的id,子路由通过id可找到父路由"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator id="uniId">
                            <Tab.Screen name="Home" component={HomeNest} />
                            <Tab.Screen
                              name="Notifications"
                              component={NotificationsScreen}
                            />
                            <Tab.Screen
                              name="Settings"
                              component={SettingsScreen}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'title') {
                return (
                  <TestSuite name="title" key={'title'}>
                    <TestCase
                      itShould="页面名称，现改成中文，tabBarLabel没设置时生效"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator>
                            <Tab.Screen
                              name="Home"
                              component={HomeScreen}
                              options={{
                                title: '主页',
                              }}
                            />
                            <Tab.Screen
                              name="Notifications"
                              component={NotificationsScreen}
                              options={{
                                title: '通知',
                              }}
                            />
                            <Tab.Screen
                              name="Settings"
                              component={SettingsScreen}
                              options={{
                                title: '设置',
                              }}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'tabBarLabel') {
                return (
                  <TestSuite name="tabBarLabel" key={'tabBarLabel'}>
                    <TestCase itShould="tabBar标签,改成中文" tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator>
                            <Tab.Screen
                              name="Home"
                              component={HomeScreen}
                              options={{
                                tabBarLabel: '主页',
                              }}
                            />
                            <Tab.Screen
                              name="Notifications"
                              component={NotificationsScreen}
                              options={{
                                tabBarLabel: '通知',
                              }}
                            />
                            <Tab.Screen
                              name="Settings"
                              component={SettingsScreen}
                              options={{
                                tabBarLabel: '设置',
                              }}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'tabBarIcon') {
                return (
                  <TestSuite name="tabBarIcon" key={'tabBarIcon'}>
                    <TestCase itShould="tabBar图标" tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator
                            screenOptions={{
                              tabBarLabelStyle: {
                                textTransform: 'none',
                              },
                            }}>
                            <Tab.Screen
                              name="Home"
                              component={HomeScreen}
                              options={{
                                tabBarIcon: ({
                                  focused: boolean,
                                  color: string,
                                }) => {
                                  return (
                                    <View style={styles.icon}>
                                      <Text>ico</Text>
                                    </View>
                                  );
                                },
                              }}
                            />
                            <Tab.Screen
                              name="Notifications"
                              component={NotificationsScreen}
                            />
                            <Tab.Screen
                              name="Settings"
                              component={SettingsScreen}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'tabBarBadge') {
                return (
                  <TestSuite name="tabBarBadge" key={'tabBarBadge'}>
                    <TestCase itShould="tabBarBadge" tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator>
                            <Tab.Screen
                              name="Home"
                              component={HomeScreen}
                              options={{
                                tabBarBadge: 'a',
                              }}
                            />
                            <Tab.Screen
                              name="Notifications"
                              component={NotificationsScreen}
                            />
                            <Tab.Screen
                              name="Settings"
                              component={SettingsScreen}
                              options={{
                                tabBarBadge: 3,
                              }}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'tabBarAccessibilityLabel') {
                return (
                  <TestSuite
                    name="tabBarAccessibilityLabel"
                    key={'tabBarAccessibilityLabel'}>
                    <TestCase
                      itShould="开启系统的屏幕阅读器，读取已设置的无障碍按钮标签"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator>
                            <Tab.Screen
                              name="Home"
                              component={HomeScreen}
                              options={{
                                tabBarAccessibilityLabel:
                                  '这是自定义的无障碍标签主页',
                              }}
                            />
                            <Tab.Screen
                              name="Notifications"
                              component={NotificationsScreen}
                              options={{
                                tabBarAccessibilityLabel:
                                  '这是自定义的无障碍标签通知',
                              }}
                            />
                            <Tab.Screen
                              name="Settings"
                              component={SettingsScreen}
                              options={{
                                tabBarAccessibilityLabel:
                                  '这是自定义的无障碍标签设置',
                              }}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'lazy') {
                return (
                  <TestSuite
                    name={
                      (platform ? `[${platform}]` : '') + (testName || title)
                    }
                    key={title + state?.[title].value}>
                    <ToggleButton
                      title={'切换' + title}
                      list={valueList}
                      initValue={value}
                      onChange={(val: any) => {
                        setState({
                          ...state,
                          [title]: {
                            ...state?.[title],
                            value: val,
                          },
                        });
                        setScreens([]);
                      }}></ToggleButton>
                    <TestCase itShould={description} tags={['C_API']}>
                      <View style={styles.container}>
                        <Text>当前渲染页面：{JSON.stringify(screens)}</Text>
                        <NavigationContainer>
                          <Tab.Navigator
                            {...{
                              screenOptions: {
                                ...extraOptions,
                                [title]: checkIsObject(state?.[title].value)
                                  ? state?.[title].value.value
                                  : state?.[title].value,
                              },
                            }}>
                            <Tab.Screen name="Home" component={HomeScreen1} />
                            <Tab.Screen
                              name="Notifications"
                              component={NotificationsScreen1}
                            />
                            <Tab.Screen
                              name="Settings"
                              component={SettingsScreen1}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'tabPress') {
                return (
                  <TestSuite name="tabPress" key={'tabPress'}>
                    <TestCase
                      itShould="点击两次Notifications选项卡会触发"
                      tags={['C_API']}
                      initialState={false}
                      assert={({expect, state}) => {
                        expect(state).to.be.true;
                      }}
                      arrange={({setState}) => {
                        const EventNotifications = (props: Props) => {
                          const {navigation} = props;
                          React.useEffect(() => {
                            const unsubscribe = navigation.addListener(
                              'tabPress',
                              (e: any) => {
                                setState(true);
                              },
                            );
                            return unsubscribe;
                          }, [navigation]);
                          return <NotificationsScreen {...props} />;
                        };

                        return (
                          <View style={styles.container}>
                            <NavigationContainer>
                              <Tab.Navigator>
                                <Tab.Screen
                                  name="Home"
                                  component={HomeScreen}
                                />
                                <Tab.Screen
                                  name="Notifications"
                                  component={EventNotifications}
                                />
                                <Tab.Screen
                                  name="Settings"
                                  component={SettingsScreen}
                                />
                              </Tab.Navigator>
                            </NavigationContainer>
                          </View>
                        );
                      }}></TestCase>
                  </TestSuite>
                );
              }

              if (title === 'tabLongPress') {
                return (
                  <TestSuite name="tabLongPress" key={'tabLongPress'}>
                    <TestCase
                      itShould="长按111111选项卡会触发"
                      tags={['C_API']}
                      initialState={false}
                      assert={({expect, state}) => {
                        expect(state).to.be.true;
                      }}
                      arrange={({setState}) => {
                        const EventNotifications = (props: Props) => {
                          const {navigation} = props;
                          React.useEffect(() => {
                            const unsubscribe = navigation.addListener(
                              'tabLongPress',
                              (e: any) => {
                                setState(true);
                              },
                            );

                            return unsubscribe;
                          }, [navigation]);
                          return <NotificationsScreen {...props} />;
                        };

                        return (
                          <View style={styles.container}>
                            <NavigationContainer>
                              <Tab.Navigator>
                                <Tab.Screen
                                  name="Home"
                                  component={HomeScreen}
                                />
                                <Tab.Screen
                                  name="Notifications"
                                  options={{tabBarLabel: '111111'}}
                                  component={EventNotifications}
                                />
                                <Tab.Screen
                                  name="Settings"
                                  component={SettingsScreen}
                                />
                              </Tab.Navigator>
                            </NavigationContainer>
                          </View>
                        );
                      }}></TestCase>
                  </TestSuite>
                );
              }

              if (title === 'layout') {
                return (
                  <TestSuite name="设置layout" key={'layout'}>
                    <Button
                      title={`是否启用layout属性 (当前: ${
                        isLayout ? '是' : '否'
                      })`}
                      onPress={() => setLayout(!isLayout)}
                    />
                    <TestCase itShould="设置layout" tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          {isLayout ? (
                            <Tab.Navigator
                              screenOptions={{
                                headerTintColor: '#000',
                              }}
                              layout={({
                                children,
                                state,
                                descriptors,
                                navigation,
                              }) => (
                                <View style={styles.container}>
                                  <Text
                                    style={[
                                      {
                                        fontSize: 16,
                                        fontWeight: 'bold',
                                        margin: 5,
                                        textAlign: 'center',
                                      },
                                      {
                                        color:
                                          state.routeNames[state.index] ===
                                          state.routeNames[state.index]
                                            ? '#2196F3'
                                            : 'black',
                                      },
                                    ]}>
                                    当前路由: {state.routeNames[state.index]}
                                  </Text>
                                  {children}
                                </View>
                              )}>
                              <Tab.Screen name="Home" component={HomeScreen} />
                              <Tab.Screen
                                name="Notifications"
                                component={NotificationsScreen}
                              />
                              <Tab.Screen
                                name="Settings"
                                component={SettingsScreen}
                              />
                            </Tab.Navigator>
                          ) : (
                            <Tab.Navigator>
                              <Tab.Screen name="Home" component={HomeScreen} />
                              <Tab.Screen
                                name="Notifications"
                                component={NotificationsScreen}
                              />
                              <Tab.Screen
                                name="Settings"
                                component={SettingsScreen}
                              />
                            </Tab.Navigator>
                          )}
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'screenLayout') {
                return (
                  <TestSuite name="设置screenLayout" key={'screenLayout'}>
                    <Button
                      title={`是否启用screenLayout属性 (当前: ${
                        isScreenLayout ? '是' : '否'
                      })`}
                      onPress={() => setScreenLayout(!isScreenLayout)}
                    />
                    <TestCase itShould="设置screenLayout" tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          {isScreenLayout ? (
                            <Tab.Navigator
                              screenLayout={({children, navigation}) => (
                                <View
                                  style={[
                                    {
                                      // backgroundColor:
                                      //   navigation.getState().routes[
                                      //     navigation.getState().index
                                      //   ].name === 'Notifications'
                                      //     ? '#2196F3'
                                      //     : '',
                                      height: 200,
                                    },
                                  ]}>
                                  {children}
                                </View>
                              )}>
                              <Tab.Screen name="Home" component={HomeScreen} />
                              <Tab.Screen
                                name="Notifications"
                                component={NotificationsScreen}
                              />
                              <Tab.Screen
                                name="Settings"
                                component={SettingsScreen}
                              />
                            </Tab.Navigator>
                          ) : (
                            <Tab.Navigator>
                              <Tab.Screen name="Home" component={HomeScreen} />
                              <Tab.Screen
                                name="Notifications"
                                component={NotificationsScreen}
                              />
                              <Tab.Screen
                                name="Settings"
                                component={SettingsScreen}
                              />
                            </Tab.Navigator>
                          )}
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'screenListeners') {
                return (
                  <TestSuite name="设置screenListeners" key={'screenListeners'}>
                    <TestCase itShould="设置screenListeners" tags={['C_API']}>
                      <View style={styles.containerForScreenListeners}>
                        <NavigationContainer>
                          <ScreenListenerDataContext.Provider
                            value={screenListenerData}>
                            <Tab.Navigator
                              screenListeners={{
                                state: e => {
                                  let data = ('通过state事件映射选项卡名称：' +
                                    JSON.stringify(
                                      e.data.state.routeNames[
                                        e.data.state.index
                                      ],
                                    )) as any;
                                  setScreenListenerData(data);
                                },
                              }}>
                              <Tab.Screen
                                name="Home"
                                component={HomeScreenForScreenListeners}
                              />
                              <Tab.Screen
                                name="Notifications"
                                component={
                                  NotificationsScreenForScreenListeners
                                }
                              />
                              <Tab.Screen
                                name="Settings"
                                component={SettingsScreenForScreenListeners}
                              />
                            </Tab.Navigator>
                          </ScreenListenerDataContext.Provider>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'popToTopOnBlur') {
                function HomeScreenForPopToTopOnBlur({navigation}) {
                  return (
                    <View
                      style={{
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}>
                      <Button
                        title="Go to Profile"
                        onPress={() => navigation.navigate('Detail')}
                      />
                    </View>
                  );
                }

                function DetailScreenForPopToTopOnBlur({navigation}) {
                  return (
                    <View
                      style={{
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}>
                      <Button
                        title="Go back"
                        onPress={() => navigation.goBack()}
                      />
                    </View>
                  );
                }

                function HomeStackForPopToTopOnBlur() {
                  return (
                    <Stack.Navigator>
                      <Stack.Screen
                        name="Home"
                        component={HomeScreenForPopToTopOnBlur}
                      />
                      <Stack.Screen
                        name="Detail"
                        component={DetailScreenForPopToTopOnBlur}
                      />
                    </Stack.Navigator>
                  );
                }

                function SettingsScreenForPopToTopOnBlur({navigation}) {
                  return (
                    <View
                      style={{
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}>
                      <Button
                        title="Go back"
                        onPress={() => navigation.goBack()}
                      />
                    </View>
                  );
                }

                return (
                  <TestSuite name="设置popToTopOnBlur" key={'popToTopOnBlur'}>
                    <TestCase itShould="设置popToTopOnBlur" tags={['C_API']}>
                      <View style={styles.containerForScreenListeners}>
                        <NavigationContainer>
                          <Tab.Navigator>
                            <Tab.Screen
                              name="Settings1"
                              component={HomeStackForPopToTopOnBlur}
                              options={{
                                popToTopOnBlur: true,
                              }}
                            />
                            <Tab.Screen
                              name="Settings2"
                              component={SettingsScreenForPopToTopOnBlur}
                              options={{
                                popToTopOnBlur: true,
                              }}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'useBottomTabBarHeight') {
                function HomeScreenForUseBottomTabBarHeight() {
                  const tabBarHeight = useBottomTabBarHeight();
                  const [displayedHeight, setDisplayedHeight] =
                    React.useState('点击按钮获取高度');
                  const handleGetHeight = () => {
                    const roundedHeight = Math.round(tabBarHeight * 100) / 100;
                    setDisplayedHeight(
                      `TabBar高度: ${roundedHeight.toFixed(2)}px`,
                    );
                  };
                  return (
                    <View style={stylesForPopToTopOnBlur.container}>
                      <Text style={stylesForPopToTopOnBlur.title}>
                        Home Screen
                      </Text>
                      <Button
                        title="获取TabBar高度"
                        onPress={handleGetHeight}
                      />
                      <Text style={stylesForPopToTopOnBlur.heightText}>
                        {displayedHeight}
                      </Text>
                    </View>
                  );
                }
                return (
                  <TestSuite
                    name="设置useBottomTabBarHeight"
                    key={'useBottomTabBarHeight'}>
                    <TestCase
                      itShould="设置useBottomTabBarHeight"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator>
                            <Tab.Screen
                              name="Home"
                              component={HomeScreenForUseBottomTabBarHeight}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'transitionSpecTiming150') {
                return (
                  <TestSuite
                    name="transitionSpec.timing"
                    key={'transitionSpec '}>
                    <TestCase
                      itShould="transitionSpec: timing设置150ms"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator
                            screenOptions={{
                              transitionSpec: {
                                animation: 'timing',
                                config: {
                                  duration: 150,
                                  easing: Easing.inOut(Easing.ease),
                                },
                              },
                              sceneStyleInterpolator: ({current}) => ({
                                sceneStyle: {
                                  opacity: current.progress.interpolate({
                                    inputRange: [-1, 0, 1],
                                    outputRange: [0, 1, 0],
                                  }),
                                },
                              }),
                            }}>
                            <Tab.Screen name="Home" component={HomeScreen} />
                            <Tab.Screen
                              name="Profile"
                              component={ProfileScreen}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'transitionSpecTiming1500') {
                return (
                  <TestSuite
                    name="transitionSpec.timing"
                    key={'transitionSpec '}>
                    <TestCase
                      itShould="transitionSpec: timing设置1500ms"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator
                            screenOptions={{
                              transitionSpec: {
                                animation: 'timing',
                                config: {
                                  duration: 1500,
                                  easing: Easing.inOut(Easing.ease),
                                },
                              },
                              sceneStyleInterpolator: ({current}) => ({
                                sceneStyle: {
                                  opacity: current.progress.interpolate({
                                    inputRange: [-1, 0, 1],
                                    outputRange: [0, 1, 0],
                                  }),
                                },
                              }),
                            }}>
                            <Tab.Screen name="Home" component={HomeScreen} />
                            <Tab.Screen
                              name="Profile"
                              component={ProfileScreen}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'transitionSpecSpring') {
                return (
                  <TestSuite
                    name="transitionSpec.spring"
                    key={'transitionSpec '}>
                    <TestCase
                      itShould="transitionSpec: Spring 弹性设置"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator
                            screenOptions={{
                              transitionSpec: {
                                animation: 'spring',
                                config: {
                                  damping: 20,
                                  mass: 1,
                                  stiffness: 100,
                                  overshootClamping: true,
                                },
                              },
                              sceneStyleInterpolator: ({current}) => ({
                                sceneStyle: {
                                  opacity: current.progress.interpolate({
                                    inputRange: [-1, 0, 1],
                                    outputRange: [0, 1, 0],
                                  }),
                                },
                              }),
                            }}>
                            <Tab.Screen name="Home" component={HomeScreen} />
                            <Tab.Screen
                              name="Profile"
                              component={ProfileScreen}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'transitionSpecSpring2') {
                return (
                  <TestSuite
                    name="transitionSpec.spring"
                    key={'transitionSpec '}>
                    <TestCase
                      itShould="transitionSpec: Spring 弹性设置更大"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator
                            screenOptions={{
                              transitionSpec: {
                                animation: 'spring',
                                config: {
                                  damping: 3,
                                  mass: 2,
                                  stiffness: 50,
                                  overshootClamping: false,
                                  restDisplacementThreshold: 0.01,
                                  restSpeedThreshold: 0.01,
                                },
                              },
                              sceneStyleInterpolator: ({current}) => ({
                                sceneStyle: {
                                  opacity: current.progress.interpolate({
                                    inputRange: [-1, 0, 1],
                                    outputRange: [0, 1, 0],
                                  }),
                                },
                              }),
                            }}>
                            <Tab.Screen name="Home" component={HomeScreen} />
                            <Tab.Screen
                              name="Profile"
                              component={ProfileScreen}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'sceneStyleInterpolator') {
                return (
                  <TestSuite
                    name="sceneStyleInterpolator 透明度效果"
                    key={'sceneStyleInterpolator'}>
                    <TestCase
                      itShould="使用透明度插值器实现淡入淡出效果"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator
                            screenOptions={{
                              transitionSpec: {
                                animation: 'timing',
                                config: {
                                  duration: 300,
                                  easing: Easing.inOut(Easing.ease),
                                },
                              },
                              sceneStyleInterpolator: ({current}) => ({
                                sceneStyle: {
                                  opacity: current.progress.interpolate({
                                    inputRange: [-1, 0, 1],
                                    outputRange: [0, 1, 0],
                                  }),
                                },
                              }),
                            }}>
                            <Tab.Screen name="Home" component={HomeScreen} />
                            <Tab.Screen
                              name="Profile"
                              component={ProfileScreen}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'sceneStyleInterpolatorScale') {
                return (
                  <TestSuite
                    name="sceneStyleInterpolator 缩放效果"
                    key={'sceneStyleInterpolatorScale'}>
                    <TestCase
                      itShould="使用缩放插值器实现页面缩放效果"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator
                            screenOptions={{
                              transitionSpec: {
                                animation: 'spring',
                                config: {
                                  damping: 10,
                                  mass: 1,
                                  stiffness: 100,
                                },
                              },
                              sceneStyleInterpolator: ({current}) => ({
                                sceneStyle: {
                                  opacity: current.progress.interpolate({
                                    inputRange: [-1, 0, 1],
                                    outputRange: [0.3, 1, 0.3],
                                  }),
                                  transform: [
                                    {
                                      scale: current.progress.interpolate({
                                        inputRange: [-1, 0, 1],
                                        outputRange: [0.8, 1, 0.8],
                                      }),
                                    },
                                  ],
                                },
                              }),
                            }}>
                            <Tab.Screen name="Home" component={HomeScreen} />
                            <Tab.Screen
                              name="Profile"
                              component={ProfileScreen}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }

              if (title === 'sceneStyleInterpolatorSlide') {
                return (
                  <TestSuite
                    name="sceneStyleInterpolator 滑动效果"
                    key={'sceneStyleInterpolatorSlide'}>
                    <TestCase
                      itShould="使用滑动插值器实现页面滑动效果"
                      tags={['C_API']}>
                      <View style={styles.container}>
                        <NavigationContainer>
                          <Tab.Navigator
                            screenOptions={{
                              transitionSpec: {
                                animation: 'timing',
                                config: {
                                  duration: 300,
                                  easing: Easing.out(Easing.quad),
                                },
                              },
                              sceneStyleInterpolator: ({current}) => ({
                                sceneStyle: {
                                  opacity: current.progress.interpolate({
                                    inputRange: [-1, 0, 1],
                                    outputRange: [0.5, 1, 0.5],
                                  }),
                                  transform: [
                                    {
                                      translateX: current.progress.interpolate({
                                        inputRange: [-1, 0, 1],
                                        outputRange: [-300, 0, 300],
                                      }),
                                    },
                                  ],
                                },
                              }),
                            }}>
                            <Tab.Screen name="Home" component={HomeScreen} />
                            <Tab.Screen
                              name="Profile"
                              component={ProfileScreen}
                            />
                          </Tab.Navigator>
                        </NavigationContainer>
                      </View>
                    </TestCase>
                  </TestSuite>
                );
              }
            }
          })}
          <TestSuite name="tabBarVariant属性测试">
            <View style={{flexDirection: 'column', gap: 5}}>
              <Button
                title={`切换tabBarPosition: ${useOptions.tabBarPosition}`}
                onPress={toggleTabBarPosition}
              />
              <View style={{width: 10}} />
              <Button
                title={`切换tabBarVariant: ${useOptions.tabBarVariant}`}
                onPress={toggleTabBarVariant}
              />
            </View>
            <TestCase itShould={'Variant of the tab bar'} tags={['C_API']}>
              <View style={styles.container}>
                <NavigationContainer>
                  <Tab.Navigator
                    screenOptions={{
                      tabBarPosition: useOptions.tabBarPosition,
                      tabBarVariant: useOptions.tabBarVariant,
                    }}>
                    <Tab.Screen name="Home" component={HomeScreen} />
                    <Tab.Screen
                      name="Notifications"
                      component={NotificationsScreen}
                    />
                    <Tab.Screen name="Settings" component={SettingsScreen} />
                  </Tab.Navigator>
                </NavigationContainer>
              </View>
            </TestCase>
          </TestSuite>
          {/* <TestSuite name="tabBarHideOnKeyboard属性测试">
            <View style={{flexDirection: 'column', gap: 5}}>
              <Button
                title={`是否使用tabBarHideOnKeyboard属性 当前: ${
                  useOptions.tabBarHideOnKeyboard ? 'true' : 'false'
                })`}
                onPress={toggleTabBarHideOnKeyboard}
              />
            </View>
            <TestCase itShould={'打开键盘时隐藏标底部签栏'} tags={['C_API']}>
              <View style={styles.container}>
                <NavigationContainer>
                  <Tab.Navigator
                    screenOptions={{
                      tabBarHideOnKeyboard: useOptions.tabBarHideOnKeyboard,
                    }}>
                    <Tab.Screen name="Home" component={HomeScreen} />
                    <Tab.Screen
                      name="Notifications"
                      component={NotificationsScreen}
                    />
                    <Tab.Screen name="Settings" component={SettingsScreen} />
                  </Tab.Navigator>
                </NavigationContainer>
              </View>
            </TestCase>
          </TestSuite> */}
        </ScrollView>
      </Tester>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 350,
  },
  containerForScreenListeners: {
    height: 500,
  },
  icon: {
    backgroundColor: 'blue',
  },
  textInput: {
    borderWidth: 1,
    width: 150,
    height: 30,
  },
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  comButton: {
    borderWidth: 3,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    height: 50,
    backgroundColor: 'pink',
    borderColor: 'gray',
  },
  comButtonText: {
    // fontSize: 24,
  },
});

const stylesForPopToTopOnBlur = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    height: 500,
  },
  title: {
    fontSize: 20,
    marginBottom: 20,
  },
  heightText: {
    marginTop: 20,
    fontSize: 16,
    color: '#666',
  },
});

export default BottomTabsExamples;
